<template>
  <div class="app-container">
    <el-form ref="banner" :rules="rules" :model="banner" label-width="150px">
      <el-form-item label="轮播名称" prop="bannerName">
        <el-input v-model="banner.bannerName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="图片" prop="bannerImage">
        <pa-upload
          :action="action"
          :show-file-list="false"
          :file-list="fileList"
          :limit="1"
          :headers="headers"
          :on-success="uploadPicUrl"
          :on-remove="onRemove"
          tip="建议轮播图尺寸:690*280"
          list-type="picture-card"
          class="avatar-uploader"
          accept=".jpg, .jpeg, .png, .gif" />
      </el-form-item>
      <el-form-item label="选择类型">
        <el-radio-group v-model="banner.bannerType">
          <el-radio label="first">首页轮播</el-radio>
          <el-radio label="second">课程视频轮播</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="跳转类型">
        <el-radio-group v-model="banner.forwardType" @change="onChangeRadio">
          <el-radio :label="0">商品</el-radio>
          <el-radio :label="1">课程视频</el-radio>
          <el-radio :label="2">链接</el-radio>
          <el-radio :label="3">内容</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="跳转内容" prop="forwardUrl">
        <el-input v-model="banner.forwardUrl" placeholder="请输入">
          <template v-if="!!banner.forwardUrlHead" slot="prepend">{{ banner.forwardUrlHead }}</template>
        </el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="banner.sorting" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="显示状态">
        <el-radio-group v-model="banner.status">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="op-container">
        <el-button type="primary" @click="handlePublish('banner')">提交</el-button>
        <el-button @click="handleCancel('banner')">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<style>
	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.input-new-keyword {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.avatar-uploader .el-upload {
		width: 145px;
		height: 145px;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}

	.op-container {
		padding-left: 100px;
	}
</style>

<script>
import {
  bannerSave
} from '@/api/banner'
import {
  MessageBox
} from 'element-ui'
import {
  getToken
} from '@/utils/auth'
import upload from '@/components/Upload'
export default {
  name: 'GoodsEdit',
  components: {
    'pa-upload': upload
  },

  data() {
    var validImg = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请上传图片'))
      } else {
        callback()
      }
    }
    return {
      action: `${process.env.BASE_API}/vms/v1/image/upload`,
      fileList: [],
      banner: {
        bannerId: '',
        bannerName: '',
        bannerImage: '',
        forwardType: 0,
        bannerType: 'first',
        status: 1,
        forwardUrl: '',
        sorting: '',
        forwardUrlHead: '/pages/production/index?id='
      },
      rules: {
        bannerName: [{
          required: true,
          message: '商品名称不能为空',
          trigger: 'blur'
        }],
        bannerImage: [{
          required: true,
          validator: validImg,
          trigger: 'blur'
        }],
        forwardUrl: [{
          required: true,
          message: '跳转内容不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
  },
  created() {
    if (this.$route.query.data) {
      const banner = JSON.parse(this.$route.query.data)
      if (banner.forwardType === 0 || banner.forwardType === 1 || banner.forwardType === 3) {
        banner.forwardUrl = banner.forwardUrl.split('=')[1]
      }
      Object.assign(this.banner, banner)
      this.fileList = [{
        url: banner.bannerImage
      }]
      this.onChangeRadio(banner.forwardType)
    }
  },

  methods: {
    handleCancel: function(formName) {
      this.$refs[formName].resetFields()
      this.$router.push({
        name: 'bannerList'
      })
    },
    handlePublish: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = Object.assign({}, this.banner)
          params.forwardUrl =
						this.banner.forwardUrlHead + this.banner.forwardUrl
          bannerSave(params)
            .then(res => {
              this.$notify.success({
                title: '成功',
                message: '添加成功'
              })
              this.$router.push({
                name: 'bannerList'
              })
            })
            .catch(response => {
              MessageBox.alert('业务错误：' + response.data.errmsg, '警告', {
                confirmButtonText: '确定',
                type: 'error'
              })
            })
        }
      })
    },
    uploadPicUrl: function(response) {
      this.banner.bannerImage = response.data.fileUrl
    },
    onRemove(file, fileList) {
      this.fileList.forEach((item, index) => {
        if (file.url === item.url) {
          this.fileList.splice(index, 1)
          this.banner.bannerImage = ''
        }
      })
    },
    onChangeRadio(e) {
      console.log(e)
      console.log(typeof e)
      if (e === 0) {
        this.banner.forwardUrlHead = '/pages/production/index?id='
      } else if (e === 1) {
        this.banner.forwardUrlHead = '/pages/course/index?id='
      } else if (e === 3) {
        this.banner.forwardUrlHead = '/pages/content/index?id='
      } else {
        this.banner.forwardUrlHead = ''
      }
      console.log(this.banner.forwardUrlHead)
    }
  }
}
</script>
